<template>
	<view class="">
		<!-- 搜索框 -->
		<view class="cu-bar bg-white search bg-gradual-orange" style="width: 750upx;padding-top: 20upx;">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input v-model="searchText" placeholder="请输入商品名称" @tap="goSearch"/>
			</view>
			<view class="action">
				<text class="cuIcon-scan" style="font-size: 150%;"></text>
			</view>
		</view>
		<view class="flex">
			<!-- 左部 -->
			<scroll-view scroll-y style="height: calc(100vh - 210upx); width: 150upx; ">
				<view  
					:style="{fontSize:selected==index?'110%':'100%'}"
				  :class="selected==index?'bg-white text-bold':''" class="type-item flex justify-around"
				  @click="select(index,item.catId)"
					v-for="(item,index) in fList" :key="index">
				
					<view class="shuxian" v-if="selected==index"></view>
					<view  style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"> {{item.name}}</view>
				
				</view>
			</scroll-view>
			
			<!-- 右部分 -->
			<scroll-view scroll-y style="height: calc(100vh - 70upx); width: 600upx;" class="bg-white">
				<view v-for="(item,index) in sList" :key="index" style="border-bottom: 10upx solid #E7EBED;">
					<!-- 二级标题-->
					<view class="g-title text-bold text-black">{{item.name}}</view>
					<!-- 三级[商品] -->
					<view class="flex flex-wrap" style="margin-top: 15upx;" v-if="item.catalog3List.length!=0">
						<view  style="width: 265upx" class="flex justify-center align-center" v-for="(item2,index2) in item.catalog3List" :key="index2">
							<view @click="selectGoods(item2)">
								<!-- 图片 -->
								<image src="../../static/icon/store.png" style="width: 150upx;height: 150upx;"></image>
								<!-- 商品名称 -->
								<view style="text-align: center;" class="type-item">{{item2.name}}</view>
							</view>
						</view>
					</view>
					<view v-else class="flex justify-center flex-direction align-center" style="padding-bottom: 20upx;">
						<view>
							<image style="width: 150upx; height: 150upx; filter: grayscale(100);" src="../../static/icon/nogoods-active.png"></image>
						</view>
						<view>暂无商品 ! </view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	export default{
		data(){
			return{
				searchText:'',
				selected:0,
				fList:[],
				stList:[], 
				sList:[]
			}
		},
		onLoad() {
			this.getfList()
			this.getsfList()
		},
		methods:{
			 async getfList(){ // 获取第一级数据
			  let res = await this.$request({
					url:'product/category/categoryLevel1',
					params:'',
					type:'GET'
				})
				this.fList = res.categorys
			},
			async getsfList(){ // 获取二三级数据
				let res = await this.$request({
					url:'product/category/catelog.json',
					params:'',
					type:'GET'
				})
				this.stList = res
				this.select(0,1)
			},
			select(index,catId){ // 选择一级项,点击一级
			  // 变效果
				this.selected = index
				// 拿到当前catID对应的二三级数据[Array
				this.sList = this.stList[catId]
			},
			selectGoods(item){ // 跳转商品列表页 
				console.log(item)
					uni.navigateTo({
					  url: '/pages/goods/goodsList?catalog3Id=' + item.id
					});
			},
			goSearch(){
				uni.navigateTo({
					url:'../search/search'
				})
			}
		}
	}
</script>

<style>
	.type-item{
		height: 100upx;
		text-align: center;
		line-height: 100upx;
		position: relative;
	}
	.shuxian{
		position: absolute;
		width: 8upx;
		height: 50upx;
		background-color: #FF0000;
		top: 25upx;
		left: 10upx;
	}
	.g-title{
		font-size: 103%;
		margin-top: 20upx;
		margin-left: 35upx;
		margin-bottom: 20upx;
	}
</style>